<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl; ?>/js/cover/cover.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/photo.css" media="all">
<?php $userid = $member_id; ?>
<article>
    <section class="cover cover clearfix margin-10">
        <div id="big-banner" style="display: block;">
            <?php if ($usercover === null):?>
                <img src="<?php echo Yii::app()->request->baseUrl; ?>/images/nte.jpg" width="1040" height="300" border="0">
            <?php else:?>
                <img src="<?php echo Yii::app()->request->baseUrl.'/'; ?>images/Banner/cover/<?php echo $usercover->image;?>" width="1040" height="300" border="0">
            <?php endif;?>
        </div>
        <div class="mask" id="mask2" style="position: absolute; top: -1000px;">
            <img id="blah" src="" >
        </div>
        <form id="cover-image" action="#" method="post">
            <!---<input style="display: none;" type="file" id="image" onchange="readURL(this);" />-->
            <input type="hidden" id="x" name="x" value="0" />
            <input type="hidden" id="y" name="y"/>
            <input type="hidden" id="w" name="w"/>
            <input type="hidden" id="h" name="h" value="300"/>
        </form>
        <div class="modify" id="modify">
           
<div class="btn-group">
  <div class="btn-group">
    <button type="button" id="drop-cover" class="btn btn-default dropdown-toggle modify-cover" data-toggle="dropdown">
    Thay đổi ảnh bìa
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu ">
      <li>
                    <a href="#" class="modify-computer">
                        <?php $this->widget('application.extensions.EAjaxUpload.EAjaxUpload',
                        array(
                                'id'=>'uploadfile',
                                'config'=>array(
                                        'action'=>Yii::app()->createUrl('/Users/members/uploadImageBanner'),
                                        'allowedExtensions'=>array("jpg", "jpeg", "png", "gif", "JPG", "JPEG", "PNG", "GIF"),
                                        'sizeLimit'=>4*1024*1024,// maximum file size in bytes
                                        'minSizeLimit'=>0.001*1024*1024,// minimum file size in bytes
                                        'onSubmit'=>"js:function(file, extension) {
                                             $('.loader').show();
                                        }",
                                        'messages'=>array(
                                            'typeError'=>"Hệ thống không hỗ trợ kiểu {file} .Hệ thống hỗ trợ kiểu file {extensions}.",
                                            'sizeError'=>"Độ lớn của ảnh {file} cao, độ lớn file lớn nhất là: {sizeLimit}.",
                                            'minSizeError'=>"Độ lớn của ảnh {file} quá nhỏ, độ lớn file nhỏ nhất mà hệ thống hỗ trợ là: {minSizeLimit}.",
                                            'emptyError'=>"{file} là trống, Bạn hãy nhập lại.",
                                            'onLeave'=>"The files are being uploaded, if you leave now the upload will be cancelled."
                                        ), 
                                        'onComplete'=>"js:function(file, response, responseJSON) {
                                            $('.loader').hide();
                                            $('#blah').attr('src', '".Yii::app()->request->baseUrl."/images/Banner/resize/'+responseJSON['filename']);
                                            var save_reset = document.getElementById('save-reset');
                                            var ele = document.getElementById('big-banner');
                                            var ale = document.getElementById('mask2');
                                            if (ele.style.display === 'block')
                                            {
                                                $('#mask2').attr('style','');
                                                ele.style.display = 'none';
                                                save_reset.style.display = 'block';
                                            }
                                            namephoto = responseJSON['filename'];
                                            typeGet = 1;
                                            covertype = 'N';
                                        }"
                                      )
                        )); ?>
                    </a>
                </li>
                <li>
                    <?php echo CHtml::link("Chọn ảnh từ Album",array('/Users/members/getAlbumPhoto',"memberid"=>$member_id),array('id'=>'modify-cover','data-toggle'=>'modal', 'data-target'=>'#ViewAlbumPhoto','class'=>'btn-modal')); ?>
                </li>
    </ul>
  </div>
</div>

        </div>
        <div class="save-reset" id="save-reset" style="display: none">
            <a href="javascript: void(0);" id="button-save-cover" class="btn-save" onclick="saveCoverPhoto();">Lưu thay đổi</a>
            <a href="javascript: void(0);" id="button-save-cover" onclick="resetCoverPhoto();" class="btn-reset">Hủy bỏ</a>
        </div>
    </section>
</article>
<script>
function saveCoverPhoto()
{
    $.ajax({
        url: '<?php echo Yii::app()->createUrl("Users/members/coverPhotoBanner");?>',
        data: { namephoto: namephoto, typeGet: typeGet, memberid: <?php echo $member_id;?>, x: $("#x").val(), y: $("#y").val(), w: $("#w").val(), h: $("#h").val(), typecover: covertype},
        type: 'post',
        beforeSend:function(){
            $('.loader').show();
        },
        success: function(data){
            $('.loader').hide();
            $('#big-banner img').attr('src', '<?php echo Yii::app()->request->baseUrl."/" ;?>images/Banner/cover/'+data);
            var ele = document.getElementById('big-banner');
            var save_reset = document.getElementById('save-reset');
            save_reset.style.display = 'none';
            $('#mask2').attr('style', 'position: absolute; top: -10000px;');
            ele.style.display = 'block';
        },
    });
}
function viewListPhoto(id, type)
{
    $.ajax({
        url     : '<?php echo Yii::app()->createUrl("/Users/members/viewListPhoto");?>',
        data    : {'id': id, 'type': type, 'memberid': <?php echo $userid;?> },
        type    : 'post',
        beforeSend:function(){
             $('#loading-view-cover').attr('style', 'display: block');
         },
        success : function(data){
             $('#list-photo-cover').html(data); 
             $('#back-cover').attr('style', 'display: block');
             $('#loading-view-cover').attr('style', 'display: none');
        },
    });
}

function callBackAlbumCover()
{
    $.ajax({
        url     : '<?php echo Yii::app()->createUrl("/Users/members/viewListAlbumPhoto");?>',
        data    : {memberid: <?php echo $userid;?> },
        type    : 'post',
        success : function(data){
            $('#list-photo-cover').html(data);
            $('#back-cover').attr('style', 'display: none');
        }
    });
}

function callBackAlbum()
{
    $.ajax({
        url     : '<?php echo Yii::app()->createUrl("/Users/members/viewListAlbumAvatar");?>',
        data    : {memberid: <?php echo $userid;?> },
        type    : 'post',
        success : function(data){
            $('#list-photo-avatar').html(data);
            $('#back-avatar').attr('style', 'display: none');
        }
    });
}

function viewBannerCover(filename, type)
{
    switch(type)
        {
            case 'D':
                $('#blah').attr('src', "<?php echo Yii::app()->request->baseUrl.'/'; ?>images/Member/originimage/"+filename);
                covertype = 'D';
                break;
            case 'C':
                $('#blah').attr('src', "<?php echo Yii::app()->request->baseUrl.'/'; ?>images/Banner/originimage/"+filename);
                covertype = 'C';
                break;
            case 'A':
                $('#blah').attr('src', "<?php echo Yii::app()->request->baseUrl.'/'; ?>images/Avatar/originimage/"+filename);
                covertype = 'A';
                break;
            case 'M':
                $('#blah').attr('src', "<?php echo Yii::app()->request->baseUrl.'/'; ?>images/Member/originimage/"+filename);
                covertype = 'M';
                break;
        }
        var ele = document.getElementById('big-banner');
        var save_reset = document.getElementById('save-reset');
        $('#mask2').attr('style', '');
        ele.style.display = 'none';
        save_reset.style.display = 'block';
        typeGet = 2;
        namephoto = filename;
        $('#ViewAlbumPhoto').modal('hide') ;
}

function viewListPhotoAvatar(id, type)
{
    $.ajax({
        url     : '<?php echo Yii::app()->createUrl("/Users/members/viewListPhotoAvatar");?>',
        data    : {'id': id, 'type': type, 'memberid': <?php echo $userid;?> },
        type    : 'post',
        beforeSend:function(){
             $('#loading-view-avatar').attr('style', 'display: block');
         },
        success : function(data){
             $('#list-photo-avatar').html(data);
             $('#back-avatar').attr('style', 'display: block');
             $('#loading-view-avatar').attr('style', 'display: none');
        },
    });
}

function createImageAvatar(){
    var create = '<img id="target" alt="thay đổi avatar" /><div id="preview-pane"><div class="preview-container"><img class="jcrop-preview" alt="Preview" /></div></div><a href="javascript: void(0);" onclick="cropAvatar();"  id="cropavt">HOÀN THÀNH</a>';
        $("#ViewUploadPhoto").modal('show');
        $('#contentImage').html(create);
}

function resizeCoverAvatar(filename){
    var imageavtid = document.getElementById('target');
        $("#contentImage img").attr('src', '<?php echo Yii::app()->request->baseUrl."/images/" ;?>Avatar/originimage/'+filename);
        $("#ViewUploadPhoto").modal('show');
        imageavtid.onload = function () {
            jQuery(function($){
            // Create variables (in this scope) to hold the API and image size
            var jcrop_api,
                boundx,
                boundy,
                // Grab some information about the preview pane
                $preview = $('#preview-pane'),
                $pcnt = $('#preview-pane .preview-container'),
                $pimg = $('#preview-pane .preview-container img'),
                xsize = $pcnt.width(),
                ysize = $pcnt.height();
                if (typeof jcrop_api != 'undefined')
                jcrop_api.destroy();
                $('#target').Jcrop({
                    boxWidth: 700,
                    boxHeight: 525,
                    onChange: updatePreview,
                    onSelect: updateCoords,
                    aspectRatio : 1,
                    },function(){
                        // Use the API to get the real image size
                        var bounds = this.getBounds();
                        boundx = bounds[0];
                        boundy = bounds[1];
                        // Store the API in the jcrop_api variable
                        jcrop_api = this;
                        // Move the preview into the jcrop container for css positioning
                        $preview.appendTo(jcrop_api.ui.holder);
                    });
            function updateCoords(c)
            {
                $('#x').val(c.x);
                $('#y').val(c.y);
                $('#w').val(c.w);
                $('#h').val(c.h);
            };
            function updatePreview(c)
            {
                if (parseInt(c.w) > 0)
                {
                    var rx = xsize / c.w;
                    var ry = ysize / c.h;
                    $pimg.css({
                        width: Math.round(rx * boundx) + 'px',
                        height: Math.round(ry * boundy) + 'px',
                        marginLeft: '-' + Math.round(rx * c.x) + 'px',
                        marginTop: '-' + Math.round(ry * c.y) + 'px'
                    });
                }
            };
            });
            var widthImage = $(".jcrop-holder").width();
            var heightImage = $('.jcrop-holder').height();
            if ( imageavtid.naturalWidth >= imageavtid.naturalHeight)
            {
                tile = imageavtid.naturalWidth / widthImage;
            }
            else
            {
                tile = imageavtid.naturalHeight / heightImage;
            }
            $('#viewImageAvatarCover').click();
        }
}

function cropAvatar()
{
    $.ajax({
        'url': "<?php echo Yii::app()->createUrl('/Users/members/cropAvatar');?>",
        'data': {namephoto: namephoto, typeGet: typeGet, x: $("#x").val(), y: $("#y").val(), w: $("#w").val(), h: $("#h").val(), 'typecover': covertype, 'memberid': <?php echo $userid ; ?>},
        'type': 'POST',
        'beforeSend': function(){
            $('.loader').show();
            $("#ViewUploadPhoto").modal('hide');
        },
        'success': function(data){
            $('.loader').hide();
            $("#avatar").attr('src','<?php echo Yii::app()->request->baseUrl."/images/";?>Avatar/resize/'+data);
        },
    });
}

function viewCropAvatar(filename, type)
{
    //$('#button-upload-avatar').appendTo('#upload-avatar');
    $('#button-upload-avatar').appendTo('.btn-upload-computer');
    createImageAvatar();   
    switch(type)
    {
        case 'D':
            $("#contentAvt img").attr('src', '<?php echo Yii::app()->request->baseUrl; ?>/images/Member/originimage/'+filename);
            covertype = 'D';
            break;

        case 'C':
            $("#contentAvt img").attr('src', '<?php echo Yii::app()->request->baseUrl; ?>/images/Banner/originimage/'+filename);
            covertype = 'C';
            break;

        case 'A':
            $("#contentAvt img").attr('src', '<?php echo Yii::app()->request->baseUrl; ?>/images/Avatar/originimage/'+filename);
            covertype = 'A';
            break;

        case 'M':
            $("#contentAvt img").attr('src', '<?php echo Yii::app()->request->baseUrl; ?>/images/Member/originimage/'+filename);
            covertype = 'M';
            break;
    }
    var imageavtid = document.getElementById('target');
    $('#ViewMemberPhoto').modal('hide') ;
    $("#ViewUploadPhoto").modal('show');
    imageavtid.onload = function () {
        jQuery(function($){
        // Create variables (in this scope) to hold the API and image size
    var jcrop_api,
        boundx,
        boundy,
        // Grab some information about the preview pane
    $preview = $('#preview-pane'),
    $pcnt = $('#preview-pane .preview-container'),
    $pimg = $('#preview-pane .preview-container img'),
    xsize = $pcnt.width(),
    ysize = $pcnt.height();
    if (typeof jcrop_api != 'undefined')
        jcrop_api.destroy();
        $('#target').Jcrop({
            boxWidth: 700,
            boxHeight: 525,
            onChange: updatePreview,
            onSelect: updateCoords,
            aspectRatio : 1
        },function(){
            var bounds = this.getBounds();
            boundx = bounds[0];
            boundy = bounds[1];
            // Store the API in the jcrop_api variable
            jcrop_api = this;
            // Move the preview into the jcrop container for css positioning
            $preview.appendTo(jcrop_api.ui.holder);
            });
            function updateCoords(c)
            {
                $('#x').val(c.x);
                $('#y').val(c.y);
                $('#w').val(c.w);
                $('#h').val(c.h);
            };
            function updatePreview(c)
            {
                if (parseInt(c.w) > 0)
                {
                    var rx = xsize / c.w;
                    var ry = ysize / c.h;
                    $pimg.css({
                        width: Math.round(rx * boundx) + 'px',
                        height: Math.round(ry * boundy) + 'px',
                        marginLeft: '-' + Math.round(rx * c.x) + 'px',
                        marginTop: '-' + Math.round(ry * c.y) + 'px'
                    });
                }
            };

            });
            var widthImage = $(".jcrop-holder").width();
            var heightImage = $('.jcrop-holder').height();
            if ( imageavtid.naturalWidth >= imageavtid.naturalHeight)
            {

                tile = imageavtid.naturalWidth / widthImage;

            }
            else
            {
                tile = imageavtid.naturalHeight / heightImage;

            }
            $('#viewImageAvatarCover').click();
    }
    namephoto = filename;
    typeGet = 2;
}

// clear data when close 
function CloseAlbumAvatar(){
    $("#ViewMemberPhoto").modal('hide');
   // $(".modal-body").html('');
}
</script>
<style type="text/css">
.cover {
position: relative;
}
.modify{
    position:absolute;
    background-color:#FFF;
    top:20px;
    right:20px;
   /* display:none;*/
}
a.modify-cover, a.modify-computer, a.modify-album {
display: block;
padding: 9px 10px 9px 9px;
width: 130px;

}
.modify-link {
    display: block;
}
.nte-fancybox-header h1 {
color: #fff;
font-size: 18px;
text-transform: uppercase;
text-align: center;
padding-top: 10px;
margin-bottom: 0px;
}
.nte-fancybox-header {
padding: 5px 5px;
background-color: #2e8500;
height: 50px;
}
.nte-fancybox a.close, .nte-fancybox a.previous-image, .nte-fancybox a.next-image {
margin: 12px;
top: 16px;
color: #999;
font-family: 'Open Sans', Tahoma, sans-serif;
font-size: 17px;
font-weight: normal;
line-height: 10px;
text-decoration: none;
}
.margin-10 {
margin-bottom: 10px;
}
.account-profile img {
border: 1px solid #ededed;
padding: 1px;
float: left;
}
.account-profile div {
display: block;
padding-top: 5px;
font-size: 11px;
margin-left: 10px;
}
.dropdown-menu{
    border: 0px solid #ccc;
border: 0px solid rgba(0,0,0,0.15);
border-radius: 0px;
-webkit-box-shadow: 0 0px 0px rgba(0,0,0,0.175);
box-shadow: 0 0px 0px rgba(0,0,0,0.175);
}
</style>

<!-- Modal -->
<div class="modal fade" id="ViewAlbumPhoto" tabindex="-1" role="dialog" aria-labelledby="myModalLabelPhoto" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">

      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- avantar -->
<!-- Modal -->
<div class="modal fade" id="ViewMemberPhoto" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">

      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- avantar -->
<!-- Modal -->
<div class="modal fade" id="ViewUploadPhoto" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" style="width:945px;position: relative;">
    <div class="modal-content" >
      <div class="modal-body">
        <div id="contentAvt">
            <div id="contentImage" style="position: relative;"></div>
        </div>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!--  -->
<div id="upload-avatar" style='display:none'>
    <div id="button-upload-avatar">
        <?php $this->widget('application.extensions.EAjaxUpload.EAjaxUpload',
            array(
                'id'=>'uploadfile_avatar',
                'config'=>array(
                        'action'=>Yii::app()->createUrl('/Users/members/uploadImageAvatar'),
                        'allowedExtensions'=>array("jpg", "jpeg", "png", "gif", "JPG", "JPEG", "PNG", "GIF"),
                        'sizeLimit'=>4*1024*1024,// maximum file size in bytes
                        'minSizeLimit'=>0.001*1024*1024,// minimum file size in bytes
                        'onSubmit'=>"js:function(file, extension) {
                            $('#button-upload-avatar').appendTo('#upload-avatar');
                            createImageAvatar();
                            $('.loader').show();
                            $('#ViewMemberPhoto').modal('hide') ;
                        }",
                        'messages'=>array(
                            'typeError'=>"Hệ thống không hỗ trợ kiểu {file} .Hệ thống hỗ trợ kiểu file {extensions}.",
                            'sizeError'=>"Độ lớn của ảnh {file} cao, độ lớn file lớn nhất là: {sizeLimit}.",
                            'minSizeError'=>"Độ lớn của ảnh {file} quá nhỏ, độ lớn file nhỏ nhất mà hệ thống hỗ trợ là: {minSizeLimit}.",
                            'emptyError'=>"{file} là trống, Bạn hãy nhập lại.",
                            'onLeave'=>"The files are being uploaded, if you leave now the upload will be cancelled."
                        ),
                        'onComplete'=>"js:function(file, response, responseJSON) {
                            $('.loader').hide();
                            $('#button-upload-avatar').appendTo('.btn-upload-computer');
                            typeGet = 1;
                            covertype = 'N';
                            namephoto = responseJSON['filename'];
                            $('#ViewMemberPhoto').modal('hide') ;
                            resizeCoverAvatar(responseJSON['filename']);
                        }"
                      )
        )); ?>
    </div>
</div>

 